import React, { Component } from 'react'
import { Flex } from 'antd-mobile'
import PropTypes from 'prop-types'
import './Product.scss'

class ProductItem extends Component {
  static propTypes = {
    onClick: PropTypes.func,
    data: PropTypes.object.isRequired,
  };

  static defaultProps = {
    onClick: () => {},
  };

  state = {

  };

  render() {
    const { onClick, data } = this.props

    return (
      <Flex styleName="product-item" onClick={onClick}>
        <img src={data.logo} alt="" styleName="logo" />
        <div styleName="item-content">
          <p styleName="item-title">{data.name}</p>
          <p styleName="item-applyNum">申请人数：<span className="taupe">{data.applyNum}人</span></p>
          <p styleName="item-labels">
            {data.tags.length > 0
              ? data.tags.split('|').map(tag => <span key={tag} className="taupe">{tag}</span>)
              : null
            }
          </p>
        </div>
        <Flex.Item styleName="item-amount">
          <p styleName="item-rate">{data.rate}</p>
          <p>可贷<span className="erythrine">{data.loanRangeMin}-{data.loanRangeMax}元</span></p>
        </Flex.Item>
      </Flex>
    )
  }
}

export default ProductItem
